<script setup>
import {onMounted, reactive, ref} from "vue";
import router from "@/router";
import {$ajax, apiUrl} from "@/utils/ajax";
import {ElMessageBox} from "element-plus";
import PageComponent from "@/components/index/PageComponent.vue";

const data = reactive([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(30)
const loading = ref(false)
const handlData = p => {
  page.value = p
  loading.value = true
  $ajax.get(`${apiUrl}admin/product/page`, {
    params: {
      page: page.value,
      pageSize: pageSize.value
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
onMounted(() => {
  handlData(1)
})

const handleEdit = row => {
  ElMessageBox.confirm(`确认删除产品【${row.name}】？`, "删除").then(() => {
    loading.value = true
    $ajax.delete(`${apiUrl}admin/product/delete`, {params: {id: row.id}}).then(() => {
      handlData(page.value)
    }).catch(()=>loading.value=false)
  })
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-button type="primary" @click="router.push({name:'productAdd'})">新增</el-button>
  </div>
  <el-table :data="data" v-loading="loading" height="75vh" border stripe size="small" class="table-data">
    <el-table-column label="产品图片" prop="images" width="85">
      <template #default="{row}">
        <el-image :src="row.images" v-if="row.images"/>
      </template>
    </el-table-column>
    <el-table-column label="产品编号" prop="id" width="85"/>
    <el-table-column label="产品名称" prop="name"/>
    <el-table-column label="产品价格" prop="prices"/>
    <el-table-column label="产品类型" prop="type">
      <template #default="{row}">
        <el-text v-if="row.type===1" type="info" size="small">虚拟卡券</el-text>
        <el-text v-if="row.type===2" type="info" size="small">实物商品</el-text>
        <el-text v-if="row.type===3" type="info" size="small">三方供货商品</el-text>
        <el-text v-if="row.type===4" type="info" size="small">消费券码</el-text>
        <!--        <el-tag v-else type="danger">商品</el-tag>-->
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="state" width="80" align="center">
      <template #default="{row}">
        <el-text v-if="row.state===1" type="success" size="small">上架</el-text>
        <el-text v-else type="danger" size="small">下架</el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button-group size="small">
          <el-button type="primary" link @click="router.push({name:'productAdd',params:{id:row.id}})">编辑</el-button>
          <el-button type="primary" link @click="router.push({name:'productCode',params:{id:row.id}})" v-if="row.type === 4">消费券码</el-button>
          <el-button type="primary" link @click="handleEdit(row)">删除</el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
</template>

<style scoped lang="less">

</style>
